<template>
  <!-- 用户登录组件 -->
  <div class="userLoginContentL">
    <!-- 这里阻止了表单的默认行为（防止表单提交，并且执行函数） -->
    <form @submit.prevent="getUserLoginData($event)">
      <div class="form-group">
        <label for="user">用户名</label>
        <input type="text" name="uname" class="form-control" id="user" placeholder="Username">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" name="upass" class="form-control" id="password" placeholder="Password">
      </div>
      <div class="form-check mb-2">
        <input type="checkbox" class="form-check-input" id="check">
        <label class="form-check-label" for="check">同意用户守则</label>
      </div>
     <div class="d-flex justify-content-between">
        <button type="submit" class="btn btn-secondary">提交</button>
     </div>
    </form>
  </div>
</template>

<script>
  // 获取本地localstorage组件
  // import LocalStorage from 'components/LocalStorage/LocalStorage'

  export default {
    name: 'UserLoginContentL',
    components: {
      // LocalStorage
    },
    data () {
      return {
        url: '',
        user: false,
        text: false
      }
    },
    methods: {
      // 获取表单内的输入内容
      getUserLoginData(event) {
        let userObj = {
          uname: event.target[0].value,
          upass: event.target[1].value,
          table: 'user'
        }
        // 输入状态判断
        let flag = event.target[2].checked;
        if (userObj.uname && userObj.upass) {
          this.user = true;
        } else {
          alert('请输入用户名或密码');
        }
        if (flag) {
          this.text = true;
        } else {
          alert('请勾选用户守则');
        }

        if (this.user && this.text) {
          // 异步提交用户登录信息请求
          this.$store.dispatch('asynGetUserL', userObj);
          
          // 防止网络缓慢，延迟1s后判断是否拿到用户登录信息
          setTimeout(() => {
            if (this.$store.state.userState) {
              // 成功后将登录数据添加到本地存储
              localStorage.setItem('userInformation', JSON.stringify(this.$store.state.userState));
              // 将用户名称和路由路径重定向
              this.$store.commit('getChangeURL');
              // 将用户输入状态重置
              this.user = false;
              this.text = false;
              
              window.location.hash = '/home';
            } else {
              alert('输入错误或未注册');
            }
          }, 1000);
        }
      }
    }
  }
   
</script>

<style scoped>

</style>